<template>
    <n-flex class="mb-4">
        <n-button tertiary @click="$router.back()">
            <template #icon>
                <ArrowBackRound />
            </template>
            返回列表
        </n-button>
    </n-flex>

    <n-tabs type="line" animated v-model:value="currentKey">
        <n-tab-pane name="app" tab="应用信息">
            <AppVue :app-id="appId" />
        </n-tab-pane>
        <n-tab-pane name="group" tab="接口分组">
            <GroupVue :app-id="appId" />
        </n-tab-pane>
        <n-tab-pane name="hash" tab="接口管理">
            <HashVue :app-id="appId" />
        </n-tab-pane>
    </n-tabs>
</template>

<script setup lang="ts">
import { ArrowBackRound } from '@vicons/material'
import { NButton } from 'naive-ui'
import AppVue from './components/App.vue'
import HashVue from './components/Hash.vue'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import GroupVue from './components/Group.vue'

const route = useRoute()
const appId = Number(route.params.id)
const currentKey = ref('app')
</script>
